<template>
  <div>



    <div>{{numberCount}}</div>

        <!-- 引入numberbox组件 -->
    <numberbox @get="getCount"></numberbox>

    <mt-button type="danger" size="large" @click="changeShopCount">danger</mt-button>

    <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
      <div class="ball" v-show="ballFlag" ref="ball"></div>
    </transition>
    <div class="gd">
      <div class="mui-card" v-for="item in articles" :key="item.title">
        <div class="mui-card-header">{{item.title}}</div>
        <div class="mui-card-content">
          <div class="mui-card-content-inner">
            <img v-lazy="item.image" />
          </div>
        </div>
        <div class="mui-card-footer">{{item.passtime}}</div>
      </div>
    </div>
  </div>
</template>
<script>

import numberbox from '../number-box/NumberBox.vue'

export default {
  data() {
    return {
      msg: this.$route.params.id,
      articles: [],
      ballFlag: false,
      numberCount:1
    };
  },
  methods: {
    getArticleList() {
      this.$http.get("https://api.apiopen.top/getWangYiNews").then(r => {
        if (r.status == 200) {
          console.log(r.body.result);
          this.articles = r.body.result.slice(0, 3);
        }
      });
    },
    beforeEnter(el) {
      el.style.transform = "translate(0,0)";
    },
    enter(el, done) {
      let badgePosition = document
        .getElementById("badge")
        .getBoundingClientRect();
      let ballPosition = this.$refs.ball.getBoundingClientRect();
      let y = badgePosition.top - ballPosition.top; //获取y轴的差
      let x = badgePosition.left - ballPosition.left; //获取x轴的差
      el.offsetWidth;
      el.style.transform = `translate(${x}px,${y}px)`;
      el.style.transition = "all .8s cubic-bezier(.4,-0.3,1,.68)";
      done();
    },
    afterEnter(el) {
      this.ballFlag = !this.ballFlag;
    },
    getCount(count){
      this.numberCount = count;
    },
    changeShopCount(){
        this.ballFlag =!this.ballFlag;
        //设置下方购物车
        document.getElementById("badge").innerText = this.numberCount;
    }
  },
  created() {
    this.getArticleList();
  },
  components:{
    numberbox
  }
};
</script>
<style lang="less" scoped>
.mui-card-footer,
.mui-card-header {
  padding: 0.1rem 0.15rem;
}
.mui-card-content-inner {
  padding: 0.15rem;
  text-align: center;
}
img {
  width: 100%;
}
img[lazy="loading"] {
  width: 40px;
  height: 300px;
  margin: auto;
}
.mui-card-header {
  font-size: 0.16rem;
}
.mui-card-footer {
  color: #6d6d72;
  border-radius: 0 0 2px 2px;
  font-size: 0.16rem;
}
.mui-card {
  font-size: 14px;
  position: relative;
  overflow: hidden;
  margin: 0.1rem;
  border-radius: 2px;
  background-color: #eee;
  background-clip: padding-box;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.mint-button--large {
  margin-top: 2rem;
}
.ball {
  width: 0.15rem;
  height: 0.15rem;
  border-radius: 50%;
  background-color: red;
  position: absolute;
  left: 2rem;
  top: 3rem;
  z-index: 999;
}
</style>



